<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="myCanvas" width="240px" 
		height="297px" style="border:1px solid #000000;">	
		</canvas>
		
		<img id="img" src="https://www.runoob.com/images/img_the_scream.jpg"/>
		
		<script>
			var i = document.getElementById("img")
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			// <!--绘制矩形-->
			// ctx.fillStyle = "#FF0000"
			// ctx.fillRect(0,0,150,150)
			// <!--绘制线条-->
			// ctx.moveTo(0,0)
			// ctx.lineTo(200,100)
			// ctx.stroke()
			// <!--绘制圆形-->
			// ctx.beginPath()
			// ctx.arc(95,50,40,0,2*Math.PI)
			// ctx.stroke()
			// <!--绘制文本-->
			// ctx.font = "20px Arial"
			// ctx.fillText("hello word!",10,20)
			// <!--绘制空心文本-->
			// ctx.strokeText("hello word!",40,50)
			// //创建渐变
			// var grd = ctx.createLinearGradient(0,0,200,0);
			// grd.addColorStop(0,"red");
			// grd.addColorStop(1,"white");
			// //填充渐变
			// ctx.fillStyle=grd;
			// ctx.fillRect(10,10,150,80);
			// //创建一个径向/圆渐变。使用渐变填充矩形
			// //创建渐变
			// var grd = ctx.createLinearGradient(75,50,5,90,60,100);
			// grd.addColorStop(0,"red");
			// grd.addColorStop(1,"white");
			// //填充渐变
			// ctx.fillStyle=grd;
			// ctx.fillRect(10,10,150,80);
			//覆盖图片
			ctx.drawImage(i,10,10);
		</script>
	</body>
</html>